<!--
 * @Author: zhangjiayong lomgmple.com@outlook.com
 * @Date: 2024-10-07 20:55:26
 * @LastEditors: zhangjiayong lomgmple.com@outlook.com
 * @LastEditTime: 2024-10-24 21:50:49
 * @FilePath: \beisai\src\components\TextShow.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div class="container">
		<slot name="title"></slot>
		<slot name="content"></slot>
	</div>
</template>

<script>
export default {};
</script>

<style scoped lang="scss">
/* NOTE: I only tested this on Google Chrome.*/

body {
	background: #fbd4c5;
}

.container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	margin-top: 100px;
}

.container h1:nth-child(2) {
	color: #355c7d;
	font-family: 'Fira Code', monospace;
	font-weight: 800;
	font-size: 20px;
	margin: 0 0 0 35%;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	width: 170px;
	animation: type 2s steps(40, end) forwards;
}

.container h1:nth-child(1) {
	opacity: 0;
	font-family: 'Work Sans', sans-serif;
	margin: 0 auto auto auto;
	background: linear-gradient(to right, #f8b195, #f67280, #c06c84);
	font-weight: 800;
	font-size: 60px;
	width: 430px;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	overflow: hidden;
	animation: shring-animation 2.2s steps(40, end) 2s forwards,
		blink 0.5s step-end infinite alternate;
}

@keyframes shring-animation {
	0% {
		background-position: 0 0;
		opacity: 0;
		width: 0;
	}
	1% {
		background-position: 0 0;
		opacity: 1;
		border-right: 1px solid orange;
	}
	50% {
		background-position: 150px 0;
		opacity: 1;
		border-right: 1px solid orange;
	}
	100% {
		background-position: 400px 0;
		opacity: 1;
		border-right: 1px solid orange;
	}
}

@keyframes type {
	0% {
		width: 0;
	}
	1%,
	99% {
		border-right: 1px solid orange;
	}
	100% {
		border-right: none;
	}
}

@keyframes blink {
	50% {
		border-color: transparent;
	}
}
</style>
